<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">
		<link rel="stylesheet" href="/statics/wxdemo/css/global.css">
		<link rel="stylesheet" href="/statics/wxdemo/css/addressbook.css">
		<link rel="stylesheet" href="/statics/wxdemo/css/creategroup.css">
		<script src="/statics/wxdemo/js/flexble.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/sdk/webimSDK3.1.2.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/js/WebIMConfig.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/js/webconn.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/js/localstorage.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/utils/msgtype.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/utils/login.js"></script>
		<script type="text/javascript" src="/statics/wxdemo/utils/dialog.js"></script>
	</head>
	<body>
		<div class="creategroupbox" id="bigbox">
			<div class="fixedtop">
				<div class="getBack">
					<van-button class="arrowbox" type="default" @click="back">
						<img src="/statics/wxdemo/img/back.png">
					</van-button>
					<p class="fixedtoptit">发起群聊</p>
					<van-button class="dingdan" type="primary" @click="opennamebox">
						确定({{chosenum}})
					</van-button>
				</div>
			</div>
			<div class="friendbox">
				<van-button 
				class="chatlistbox" 
				type="default" 
				v-for="(item,index) in friendList"
				:key="index"
				@click="choseitem(index)"
				>
					<img v-if="!item.chose" class="chosecir" src="/statics/wxdemo/img/nochoseg.png">
					<img v-if="item.chose" class="chosecir" src="/statics/wxdemo/img/choseg.png">
					<img class="avatar" src="/statics/wxdemo/img/avatar.jpg">
					<div class="chatlist_rightbox">
						<div class="chatlistmidbox">
							<p class="chatname">{{item.name}}</p>
						</div>
					</div>
				</van-button>	
			</div>
			<div v-if="shownamebox" class="namebox">
				<div class="namebox_contentbox">
					<div class="closebox" @click="shownamebox = false">
						<img src="/statics/wxdemo/img/clearsea.png">
					</div>
					<p class="namebox_contenttit">群名称</p>
					<input v-model="groupname" type="text" placeholder="请输入群名称">
					<div class="conbuttonbox">
						<van-button :disabled="!clearicon" type="primary" @click="createGroup">发送申请</van-button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
var webvue = new Vue({
	el: '#bigbox',
	data() {
		return {
			groupname:'',
			friendList:[],
			shownamebox:false,//填写群组名称
			clearicon:false,
			disabled:true,
			begrouparr:[]
		}
	},
	watch:{
		groupname:{
			handler(){
				if(this.groupname){
					this.clearicon = true;
				}else{
					this.clearicon = false;
				}
			}
		}
	},
	mounted(){
		isfirst = 8;
		relogin()
	},
	computed:{
		chosenum(){
			var arr = [];
			this.friendList.forEach((item)=>{
				if(item.chose){
					arr.push(item)
				}
			})
			return arr.length
		}
	},
	methods:{
		back(){
			window.history.go(-1);
		},
		getFriends(){
			var that = this;
			that.friendList = [];
			conn.getRoster({
			  success: function ( roster ) {
				  console.log(roster)
				  roster.forEach((item,index)=>{
					  var obj = {
						  name:item.name,
						  sendID:item.name,
						  chose:false
					  }
					  that.friendList.push(obj)
					  console.log(that.friendList)
				  })
			  },    
			});
		}, 
		choseitem(index){
			if(this.friendList[index].chose){
				this.friendList[index].chose = false;
				var itemindex = this.begrouparr.findIndex((item=>item == this.friendList[index].name));
				this.begrouparr.splice(itemindex,1)
			}else{
				this.friendList[index].chose = true;
				if(this.begrouparr.indexOf(this.friendList[index].name)==-1){
					this.begrouparr.push(this.friendList[index].name)
				}
			}
			console.log(this.begrouparr)
		},
		createGroup(){
			var that = this;
			var options = {
				data: {
					groupname: this.groupname,                    // 群组名
					desc: this.groupname,                          // 群组描述
					members: this.begrouparr,            // 用户名组成的数组
					public: true,                         // pub等于true时，创建为公开群
					approval: true,                  // approval为true，加群需审批，为false时加群无需审批
					allowinvites: false           // true：允许群成员邀请人加入此群，false：只有群主才可以往群里加人   
				},
				success: function (respData) {
					vant.Toast.success('创建成功')
					that.shownamebox = false;
					window.location.href = '/Welcome/groupbook'
				},
				error: function (res) {
					console.log('error')
					console.log(res)
				}
			};
			conn.createGroupNew(options);
		},
		opennamebox(){
			if(this.begrouparr.length>0){
				this.shownamebox = true;
			}else{
				vant.Toast('请选择好友')
			}
		}
	}
})
</script>